<template>
  <div>
    <root name="menu">
      <div id="app">
        <safe-header
          v-bind="{
            fixedTop: true,
            color: '#fff',
            textColor: '#000',
            type: 'doubleTitle',
          }"
        >
          <template v-slot:left>
            <v-row class="ma-0">
              <v-col class="pa-0">WMS仓管系统</v-col>
            </v-row>
          </template>
          <template v-slot:right>
            <v-row class="ma-0">
              <v-col class="pa-0 d-flex justify-end" @click="slidePane">
                <v-icon color="#f8a73c">{{ mdiMapMarker }}</v-icon>
                {{ wareName }}
              </v-col>
            </v-row>
          </template>
        </safe-header>
        <!-- 第一部分 -->
        <section class="top-banner">
          <swiper :options="swiperOption" ref="mySwiper">
            <!-- 人员信息-->
            <swiper-slide class="card-wrapper">
              <div class="swiper-card" id="bg1" style="color: #9c6018">
                <v-banner dark shaped single-line tile>今日消息</v-banner>
                <!-- <v-row class="card-header ma-0" style="color: #9c6018">
                <img :src="imgSrc[0]" class="toggle-icon" />
                <div>{{ $t("pro.personal") + $t("base.info") }}</div>
              </v-row>
              <v-row class="ma-0 card-content">
                <b>{{
                  banner.employeeMap.employeeName +
                  "/" +
                  banner.employeeMap.employeeCode
                }}</b>
              </v-row>
              <v-row
                align-items="center"
                justify-content="between"
                class="card-sub-con align-center justify-space-between ma-0"
              >
                <div>{{ $t("pro.production_dep") }}</div>
                <div>{{ banner.employeeMap.employeeDeptName }}</div>
                </v-row>-->
              </div>
            </swiper-slide>
          </swiper>
        </section>

        <!-- 第二部分 -->
        <section class="top-content pt-1">
          <index-menu :menuData="menuData"></index-menu>
        </section>
      </div>
      <v-navigation-drawer v-model="drawer" absolute flat right temporary width="180">
        <v-list nav dense>
          <v-list-item-group v-model="group" active-class="deep-purple--text text--accent-4">
            <v-list-item v-for="(item, index) in cellList" :key="index">
              <v-list-item-title>{{ item.wareName }}</v-list-item-title>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>
    </root>
  </div>
</template>
<script>
// import http from "../../utils/http";
import business from "../../utils/business_product.js";
import { lock } from "tua-body-scroll-lock";
import Storage from "../../utils/storage.js";
import IndexMenu from "../../components/menu";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import _ from "lodash";
import Root from "@/components/Root.vue";
import SafeHeader from "../../components/safeHeader_wms";
import { mdiMapMarker } from "@mdi/js";
import wms from "@/utils/business_wms";

export default {
  name: "Menu",
  props: ["that"],
  components: {
    IndexMenu,
    swiper,
    swiperSlide,
    Root,
    SafeHeader
  },
  data() {
    return {
      // curHeight:0,
      mdiMapMarker: mdiMapMarker,
      drawer: false,
      group: null,
      wareName: "",
      attrs: {
        elevation: 2
      },
      // menuData: [
      //   [
      //     // {
      //     //   rel: "PurchaseReceipt",
      //     //   isIcon: "1",
      //     //   iconName: "mdi-apple-icloud",
      //     //   title: "采购收货",
      //     //   bgColor: "#193690",
      //     // },
      //     // {
      //     //   rel: "ShelfOperation",
      //     //   isIcon: "1",
      //     //   iconName: "mdi-apple-icloud",
      //     //   title: "上架作业",
      //     //   bgColor: "#193690",
      //     // },
      //     {
      //       rel: "ArrivalProvisionalReceipt",
      //       isIcon: 0,
      //       iconName: "andanshouhuo",
      //       title: "到货暂收",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "unbatchInspection",
      //       isIcon: 0,
      //       iconName: "dayinji2",
      //       title: "批量质检",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "QualityTest",
      //       isIcon: 0,
      //       iconName: "qc",
      //       title: "质检判定",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "PackingMarking",
      //       isIcon: 0,
      //       iconName: "zhuangxiang",
      //       title: "装箱打标",
      //       bgColor: "#193690",
      //     },
      //     // {
      //     //   rel: "AssemblyAndDisassembly",
      //     //   isIcon: "1",
      //     //   iconName: "mdi-apple-icloud",
      //     //   title: "组托拆托",
      //     //   bgColor: "#193690",
      //     // },
      //     {
      //       rel: "ShelfRecommended",
      //       isIcon: 0,
      //       iconName: "tuijianshangjia",
      //       title: "推荐上架",
      //       bgColor: "#193690",
      //     },
      //     // {
      //     //   rel: "ReceiptByOrder",
      //     //   isIcon: 0,
      //     //   iconName: "andanshouhuo",
      //     //   title: "按单收货",
      //     //   bgColor: "#193690",
      //     // },
      //     {
      //       rel: "PickingByOrder_two",
      //       isIcon: 0,
      //       iconName: "jianhuo",
      //       title: "按单拣货",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "WarePick2",
      //       isIcon: 0,
      //       iconName: "wavepick",
      //       title: "波次拣货",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "OutboundReview",
      //       isIcon: 0,
      //       iconName: "chukufuhe",
      //       title: "出库复核",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "OutboundReview2",
      //       isIcon: 0,
      //       iconName: "chukufuhe",
      //       title: "波次复核",
      //       bgColor: "#193690",
      //     },

      //   ],
      //   [
      //     {
      //       rel: "ContainerTransfer",
      //       isIcon: 0,
      //       iconName: "yiku",
      //       title: "容器转移",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "Inventory",
      //       isIcon: 0,
      //       iconName: "jianhuo",
      //       title: "盘点任务",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "RawMaterialsOutManage",
      //       isIcon: 0,
      //       iconName: "chukufuhe",
      //       title: "原材料出库",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "AccessoriesOutManage",
      //       isIcon: 0,
      //       iconName: "jianhuo",
      //       title: "先发配件出库",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "InventoryQuery",
      //       isIcon: 0,
      //       iconName: "kucunchaxun",
      //       title: "库存查询",
      //       bgColor: "#193690",
      //     },
      //     {
      //       rel: "PrinterSettings",
      //       isIcon: 0,
      //       iconName: "dayinji2",
      //       title: "打印机设置",
      //       bgColor: "#193690",
      //     },
      //     //
      //     //   {
      //     //   rel: "unbatchInspection_skip",
      //     //   isIcon: 0,
      //     //   iconName: "dayinji2",
      //     //   title: "批量质检1",
      //     //   bgColor: "#193690",
      //     // },
      //   ],
      // ],
      menuData: [[]],
      swiperOption: {
        centeredSlides: true,
        pagination: {
          el: ".swiper-pagination"
        }
      },
      bannerBg: [
        "#f3d0b3",
        "#C2C6C9",
        "#F3D9CF",
        "#2DD2E3",
        "#E2B87F",
        "#00CCCC"
      ],
      imgSrc: [
        require("../../assets/img/banner1-1.png"),
        require("../../assets/img/banner2-1.png"),
        require("../../assets/img/banner3-1.png"),
        require("../../assets/img/banner4-1.png"),
        require("../../assets/img/banner5-1.png"),
        require("../../assets/img/banner6-1.png")
      ],
      theActiveIndex: 0,
      banner: {
        employeeMap: {
          employeeId: "",
          employeeCode: "",
          employeeName: "",
          employeeDeptName: ""
        },
        equipInfo: {
          equipId: "",
          equipCode: "",
          equipName: "",
          equipColor: "",
          useStatus: ""
        },
        uqcInfo: {},
        route: {},
        kpartDaq: {},
        uexDaqInfoMap: {}
      },
      appIconBadgeQty: 0,
      cellList: []
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    asynMenuData() {
      let _menuData = Object.assign([], this.menuData);
      let otherColor = business.hexToRgba(
        this.bannerBg[this.theActiveIndex],
        "0.3"
      );
      _menuData.forEach(menus => {
        menus = menus.map(item => {
          item.isActive = item.modlueFlag == this.theActiveIndex;
          item.bgColor = item.isActive
            ? this.bannerBg[item.modlueFlag]
            : otherColor; //"primary";
          return item;
        });
        console.log(menus);
      });
      return _menuData;
    }
  },
  watch: {
    group(val) {
      console.log("group", val);
      this.wareName = this.cellList[val].wareName;
      //设置全局变量
      localStorage.setItem("wareId", this.cellList[val].wareId);
      localStorage.setItem("wareName", this.cellList[val].wareName);
      this.drawer = false;
    }
  },
  methods: {
    //  beforeMount (height) {
    //    let h = document.documentElement.clientHeight || document.body.clientHeight;
    //    this.curHeight = h - height;
    //  },
    // 获取菜单
    async getMenu() {
      //请求后台--查询菜单
      let loginconfig = Storage.getObject("loginConfig");
      wms
        .get({
          url: "/login/PDAGetMenus",
          data: { userId: loginconfig.userId }
        })
        .then(res => {
          if (res.status == 200 && res.data.code == 200) {
            let menus = res.data.data;
            let count = 1;
            let PdaMenuData = [];
            let PdaMenu = [];
            menus.forEach(menu => {
              //每9个菜单资源为一个页面
              if (count <= 9) {
                PdaMenu.push({
                  rel: menu.url,
                  isIcon: 0,
                  iconName: menu.code,
                  title: menu.name,
                  bgColor: "#627AEC"
                });
                count++;
              } else {
                PdaMenuData.push(PdaMenu);
                //清空数据
                PdaMenu = [];
                PdaMenu.push({
                  rel: menu.url,
                  isIcon: 0,
                  iconName: menu.code,
                  title: menu.name,
                  bgColor: "#627AEC"
                });
                count = 1;
                count++;
              }
            });
            //把最后一个菜单的页面数据加入数组
            PdaMenuData.push(PdaMenu);
            this.menuData = PdaMenuData;
          }
        });
    },
    // 打开侧滑页面
    slidePane() {
      this.drawer = true;
      // 先判断菜单是否存在
      if (this.cellList == undefined || this.cellList.length <= 0) {
        wms
          .get({
            url: "/ware/infos/list",
            data: { criteria: null }
          })
          .then(res => {
            if (res.status == 200 && res.data.code == 200) {
              let wareInfos = res.data.data.list;
              wareInfos.forEach(wareInfo => {
                this.cellList.push({
                  wareId: wareInfo.wareId,
                  wareName: wareInfo.wareName
                });
              });
            }
          });
      }
    }
  },
  mounted() {
    //页面禁止滚动
    const targetElement = document.querySelector("#content");
    lock(targetElement);

    let that = this;
    //获取菜单
    this.getMenu();
    //获取全局变量 仓库
    let currentWareId = localStorage.getItem("wareId");
    if (!currentWareId) {
      this.$root.api.api.toast({
        msg: "请选择仓库",
        duration: 4000,
        location: "bottom"
      });
      this.drawer = true;
      //获取仓库
      wms
        .get({
          url: "/ware/infos/list",
          data: { criteria: null }
        })
        .then(res => {
          console.log(JSON.stringify(res.data));
          if (res.status == 200 && res.data.code == 200) {
            let wareInfos = res.data.data.list;
            wareInfos.forEach(wareInfo => {
              this.cellList.push({
                wareId: wareInfo.wareId,
                wareName: wareInfo.wareName
              });
            });
          }
          console.log(JSON.stringify(this.cellList));
        });
    } else {
      this.wareName = localStorage.getItem("wareName");
    }
    this.swiper.on("slideChange", function() {
      let swiperThis = this;
      window.setTimeout(() => {
        that.theActiveIndex = swiperThis.activeIndex;
      }, 10);
    });
  }
};
</script>
<style scoped lang="scss">
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  // #top {
  //   padding-top: 1px !important;
  // }
  .top-banner {
    padding-top: 1px;
    margin-top: 5px;
    ::v-deep .swiper-pagination-bullet {
      margin: 0 3px;
      &.swiper-pagination-bullet-active {
        background: #888;
      }
    }

    .pagination-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 15px;
      padding-bottom: 12px;
      // border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }
    .card-wrapper {
      display: flex;
      padding: 1vw 12px;
      width: 100%;
      box-sizing: border-box;
      .swiper-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 8rem;
        color: #fff;
        border-radius: 8px;
        padding: 2vw;
        margin: 0;
        // align-items: center;
        .toggle-icon {
          width: 22px;
          height: 22px;
          margin-right: 10px;
        }
        .toggle-icon1 {
          width: 20px;
          height: 24px;
          margin-right: 10px;
        }
        .card-header {
          font-size: 16px;
        }
        .card-content {
          font-size: 18px;
        }
      }
      .card-sub-con {
        padding: 0 0.8rem;
      }
    }
  }
}
#bg1 {
  background: url("../../assets/img/banner1.png") center/100% 100%;
  z-index: -1;
}

.top-content {
  // background-color: cornflowerblue;
  flex: 1;
}
::v-deep .v-navigation-drawer {
  top: 80px !important;
}
</style>
